<template>
  <a-modal
    title="活动主图上传"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
    cancelText="关闭"
    style="top:20px;"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item label="活动主图" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-upload
            listType="picture-card"
            class="icon-uploader"
            :showUploadList="false"
            :action="uploadAction"
            :data="{'isup':1,'dir':'goods/'+this.model.productSn+'/promotion/'}"
            :headers="headers"
            :beforeUpload="beforeUpload"
            @change="handleChange"
          >
            <img v-if="picUrl" :src="getPicView()" alt="icon" style="height:104px;max-width:300px"/>
            <div v-else>
              <a-icon :type="uploadLoading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">上传</div>
            </div>
          </a-upload>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
  import { httpAction } from '@/api/manage'
  import { ACCESS_TOKEN } from "@/store/mutation-types"
  import { getAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import moment from "moment"
  import Vue from 'vue'

  export default {
    name: "CmsPromotionPicModal",
    data () {
      return {
        visible: false,
        confirmLoading: false,
        model: {},

        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        uploadLoading:false,
        headers:{},
        form: this.$form.createForm(this),
        picUrl: "",
        url: {
          edit: "/cms/cmsImageTag/editCmsImageTagProduct",
          fileUpload: window._CONFIG['domianURL']+"/sys/common/ossUpload",
          imgerver: window._CONFIG['domianURL']+"/sys/common/view",
        },
      }
    },
    created () {
      const token = Vue.ls.get(ACCESS_TOKEN);
      this.headers = {"X-Access-Token":token};
    },
    computed:{
      uploadAction:function () {
        return this.url.fileUpload;
      }
    },
    methods: {
      show(record) {
        this.visible = true;
        this.model =  Object.assign({}, record);
        this.picUrl = this.model.promoImg;
      },
      beforeUpload: function(file){
        var fileType = file.type;
        if(fileType.indexOf('image')<0){
          this.$message.warning('请上传图片');
          return false;
        }
        //TODO 验证文件大小
      },
      handleChange (info) {
        this.picUrl = "";
        if (info.file.status === 'uploading') {
          this.uploadLoading = true;
          return
        }
        if (info.file.status === 'done') {
          var response = info.file.response;
          this.uploadLoading = false;
          console.log(response);
          if(response.success){
            this.model.promoImg = response.message;
            this.picUrl = this.model.promoImg;
          }else{
            this.$message.warning(response.message);
          }
        }
      },
      getPicView(){
        if(this.model.promoImg !== null && this.model.promoImg !== undefined && this.model.promoImg !== ''){
          if('http' === this.model.promoImg.substring(0,4)){
            return this.model.promoImg;
          }
          return this.url.imgerver +"/"+ this.model.promoImg;
        }
      },
      close () {
        this.form.resetFields();
        this.$emit('close');
        this.visible = false;
      },
      handleSubmit () {
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            console.log(values)
            this.confirmLoading = true;
            let formData = {};
            formData.id = this.model.id;
            formData.promoImg = this.model.promoImg;
            console.log(formData)
            httpAction(this.url.edit,formData,'put').then((res)=>{
              if(res.success){
                this.$message.success(res.message);
                this.$emit('ok');
              }else{
                this.$message.warning(res.message);
              }
            }).finally(() => {
              this.confirmLoading = false;
              this.close();
            })
          }
        })
      },
      handleCancel () {
        this.close()
      },
    }
  }
</script>
<style scoped>
  .icon-uploader > .ant-upload {
    width:104px;
    height:104px;
  }
  .ant-upload-select-picture-card i {
    font-size: 49px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }

  .ant-table-tbody .ant-table-row td{
    padding-top:10px;
    padding-bottom:10px;
  }

  .drawer-bootom-button {
    position: absolute;
    bottom: -8px;
    width: 100%;
    border-top: 1px solid #e8e8e8;
    padding: 10px 16px;
    text-align: right;
    left: 0;
    background: #fff;
    border-radius: 0 0 2px 2px;
  }
</style>